<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
</head>

<body>
<@layout>

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">

                <div class="ibox-content">
                    <div class="example-wrap">
                        <div class="example">
                            <div class="alert alert-danger" id="examplebtTableEventsResult" role="alert" style="display: none">
                                事件结果
                            </div>
                            <#--<div>
                                <form  id="query_form" class="form-inline">
                                    <input name="name" type="text" class="form-control" placeholder="输入名称">
                                    <button id="btn_query" type="button" class="btn btn-info btn-sm">
                                        <i class="fa fa-search" aria-hidden="true"></i>
                                        查询
                                    </button>
                                </form>

                            </div>
                            <div class="hr-line-dashed"></div>-->
                            <div class="btn-group hidden-xs" id="toolbar" role="group">

                                <button id="btn_add" type="button" class="btn btn-info btn-sm">
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                    添加
                                </button>

                                <button id="btn_edit" type="button" class="btn btn-info btn-sm" >
                                    <i class="fa fa-paste" aria-hidden="true"></i> 编辑
                                </button>

                                <button id="btn_auth" type="button" class="btn btn-info btn-sm">
                                    <i class="fa fa-paste" aria-hidden="true"></i> 授权设置
                                </button>

                                <button id="btn_remove" type="button" class="btn btn-info btn-sm">
                                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                    移除
                                </button>
                            </div>
                            <table id="data-table"  data-mobile-responsive="true">
                            </table>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
</div>

</@layout>

<script src="/assets/js/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/assets/js/plugins/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

<script type="text/javascript">
    var $table = null;
    $(function () {
        initTable();
        btnEvent();
    });

    function initTable() {
        $table = $('#data-table').bootstrapTable({
            url: global.adminPath + '/role/datapage',  //请求后台的URL（*）
            method: 'post',   //请求方式（*）
            //toolbar: '#toolbar',  //工具按钮用哪个容器
            striped: false,   //是否显示行间隔色
            cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,   //是否显示分页（*）
            sortable: false,   //是否启用排序
            sortOrder: "desc",   //排序方式
            queryParams: function queryParams(params) { //传递参数（*）
                var pars=$('#query_form').serializeJSON();
                params = $.extend({}, params, pars);
                params.currentPage=(params.offset/params.limit)+1;
                params.showCount = params.limit;
                return params;
            },
            sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,   //初始化加载第一页，默认第一页
            pageSize: 10,   //每页的记录行数（*）
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            search: false,   //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,   //是否显示所有的列
            showRefresh: false,   //是否显示刷新按钮
            minimumCountColumns: 2,  //最少允许的列数
            clickToSelect: true,  //是否启用点击选中行
            //height: 400,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",   //每一行的唯一标识，一般为主键列
            showToggle: false,   //是否显示详细视图和列表视图的切换按钮
            cardView: false,   //是否显示详细视图
            detailView: false,   //是否显示父子表
            columns: [
                {
                    checkbox: true
                },{
                    field: 'roleCode',
                    title: '角色CODE'
                },{
                    field: 'roleName',
                    title: '角色名称'
                },
                {
                    field: 'roleType',
                    title: '角色类型',
                    formatter:function (value, row, index) {
                        if(value=='1'){
                            return '系统'
                        }else{

                        }
                        return '未分'
                    }
                },
                {
                    field: 'roleLevel',
                    title: '角色级别'
                }
            ]
        });
    }


    function btnEvent() {
        $('#btn_query').click(function () {
            $table.bootstrapTable('destroy');
            initTable();
        });

        $('#btn_add').click(function () {
            var url = global.adminPath + '/role/addview';
            layer_show('添加', url, 800, 500);
        });

        $('#btn_edit').click(function () {
            var obj = $table.bootstrapTable('getSelections');

            if (obj.length != 1) {
                layer.alert('请选择一条', {
                    icon: 7
                });
                return false;
            }

            var url = global.adminPath + '/role/edit/' + obj[0].roleId;
            layer_show('编辑', url, 800, 500);
        });

        $('#btn_auth').click(function () {
            var obj = $table.bootstrapTable('getSelections');

            if (obj.length != 1) {
                layer.alert('请选择一条', {
                    icon: 7
                });
                return false;
            }

            var url = global.adminPath + '/role/authview/' + obj[0].roleId;
            layer_show('授权设置', url, 800, 500);
        });

        $('#btn_remove').click(function () {
            var obj = $table.bootstrapTable('getSelections');

            if (obj.length != 1) {
                layer.alert('请选择一条', {
                    icon: 7
                });
                return false;
            }

            layer.confirm('确认要删除吗？', function (index) {
                var data = {};

                $.ajax({
                    type: "POST",
                    data: data,
                    dataType: 'json',
                    url: global.adminPath + '/role/delete/' + obj[0].roleId,
                    success: function (res) {
                        if (res.success) {
                            layer.msg(res.message, {
                                icon: 1,
                                time: 2000, ///2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                $table.bootstrapTable('destroy');
                                initTable();
                            });
                        } else {
                            layer.msg(res.message, { icon: 2 });
                        }
                    }
                });

            });
        });
    }


</script>

</body>

</html>